<template>
  <div id="importBox">
    <el-dialog
      :title="
        typestatus == 1
          ? '年终奖导入'
          : typestatus == 2
          ? '定薪导入'
          : '调薪导入'
      "
      :visible.sync="isDiaor"
      width="40%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div v-if="typestatus == 3" class="active">
        <h3 @click="flag = true" :style="flag ? 'color:#409EFF' : ''">
          试用期调薪导入
        </h3>
        <p></p>
        <h3 @click="flag = false" :style="flag ? '' : 'color:#409EFF'">
          正式工资调薪导入
        </h3>
      </div>
      <div style="padding: 10px 20px 20px 20px">
        <div class="uploadForm">
          <el-upload
            class="uploadContent"
            accept=".xls,.xlsx,.xlsm"
            :show-file-list="false"
            :multiple="false"
            :auto-upload="false"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handelFileChange"
          >
            <el-input
              :placeholder="uploadFile ? uploadFile.name : '请选择文件..'"
              ref="uploadInput"
              @focus="handleFocus"
            ></el-input>
            <el-button round size="medium">浏览文档</el-button>
          </el-upload>
          <el-link
            type="primary"
            :underline="false"
            :href="templateUrl"
            v-if="typestatus == 1"
            >下载模板</el-link
          >
          <el-link type="primary" :underline="false" v-else @click="goTemplate"
            >下载模板</el-link
          >
        </div>
        <div style="margin-top: 20px" v-if="typestatus == 1">
          <p>1. 请使用标准模板进行导入，完善年终奖数据即可，方便不易出错</p>

          <p>2. 请注意文件导入要求</p>

          <p>（1）不支持复合表头</p>

          <p>（2）只能导入系统中已有员工的考勤扣款数据</p>

          <p>
            （3）考勤扣款项目需要和表中设置的保持一致，不能删除与更改，否则不能识别
          </p>

          <p>（4）重名员工，请填写工号，否则不能识别</p>
        </div>
        <div v-else-if="typestatus == 2">
          <p>1. 请使用标准模板进行导入，完善定薪数据即可，方便不易出错</p>

          <p>2. 请注意文件导入要求</p>

          <p>（1）不支持复合表头</p>

          <p>（2）只能导入系统中已有员工且未定薪的员工数据</p>

          <p>
            （3）定薪项目需要和表中设置的保持一致，不能删除与更改，否则不能识别
          </p>

          <p>（4）重名员工，请填写工号，否则不能识别</p>
        </div>
        <div v-else>
          <p>1. 请使用标准模板进行导入，完善调薪数据即可，方便不易出错</p>

          <p>2. 请注意文件导入要求</p>

          <p>（1）不支持复合表头</p>

          <p>（2）只能导入系统中已有员工且未调薪的员工数据</p>

          <p>
            （3）定薪项目需要和表中设置的保持一致，不能删除与更改，否则不能识别
          </p>

          <p>（4）重名员工，请填写工号，否则不能识别</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('失败')">取 消</el-button>
        <el-button type="primary" @click="submitUpload">导入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import requestList from "@/api/moduleApi_xc/management";
export default {
  props: {
    isDiaor: {
      type: Boolean,
      require: true,
      default: (_) => false,
    },
    typestatus: {
      type: Number, //1年终奖导入 //2定薪导入 3调薪导入
      default: (_) => 1,
    },
    abId: {
      type: Number,
      default: (_) => 1,
    },
    subId: {
      type: String,
    },
  },
  data() {
    return {
      templateUrl: "",
      uploadFile: null,
      flag: true,
    };
  },
  mounted() {
    this.templateUrl = requestList.templateUrl;
  },
  methods: {
    handleClose(status) {
      this.$emit("handleClose", status);
    },
    importTemplate() {
      let formData = new FormData();
      console.log(this.uploadFile, "this.uploadFile");
      formData.append("ImportFile", this.uploadFile);
      if (this.typestatus == 1) {
        requestList.importAnnualBonus(this.abId, formData).then((res) => {
          if (res.data.status == 200) {
            this.handleClose("成功");
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        });
      } else if (this.typestatus == 2) {
        let type = 1;
        let subId = this.subId;
        requestList.importcompensation(type, subId, formData).then((res) => {
          if (res.data.status == 200) {
            this.handleClose("成功");
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        });
      } else {
        let type = this.flag ? 2 : 3;
        let subId = this.subId;
        requestList.importcompensation(type, subId, formData).then((res) => {
          if (res.data.status == 200) {
            this.handleClose("成功");
            this.$message.success(res.data.message);
          } else {
            this.$message.warning(res.data.message);
          }
        });
      }
    },
    submitUpload() {
      if (this.uploadFile) {
        this.importTemplate();
        this.$refs.upload.submit();
      } else {
        this.$message.warning("请选择要导入的文件");
      }
    },
    handelFileChange(file) {
      this.uploadFile = file.raw;
      console.log(this.uploadFile, " this.uploadFile");
    },
    handleFocus() {
      this.$refs.uploadInput.blur();
    },
    goTemplate() {
      let type = this.flag ? 2 : 3;
      if (this.typestatus == 2) {
        type = 1;
      }
      requestList.templatecompensation({ type }).then((res) => {
        let { status, data } = res.data;
        if (status == 200) {
          window.open(data);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.active {
  display: flex;
  margin-left: 20px;
  h3 {
    font-weight: 600;
    line-height: 30px;
    cursor: pointer;
  }
  p {
    width: 1px;
    height: 30px;
    background-color: rgb(195, 195, 195);
    margin-left: 30px;
    margin-right: 30px;
  }
}
.uploadForm {
  display: flex;
  margin: 30px 0;
  .uploadContent {
    :deep(.el-upload) {
      display: flex;
      & > * {
        margin-right: 15px;
      }
    }
  }
}
</style>